<template>
  <div class="">
	<iw-header></iw-header>
    <!--主体内容-->
	<!-- 注册条件要求邮箱或者手机号不能重复 -->
    <section class="register_box container">
        <div class="register">
            <h2>新用户注册</h2>
            <ul>
                <li>
                    <span>邮箱：</span>
                    <input type="text" v-model="uname"  @blur="checkUname()" placeholder="请输入邮箱名"/>
                    <em v-show="unameMsg" :class="unameIconClass"> </em>
                    <i :class="this.unameright?'textok':''">{{unameMsg}}</i>
                </li>
                <li>
                    <span>手机号：</span>
                    <input type="text" v-model="phone" @blur="checkPhone()" placeholder="请输入手机号"/>
                    <em v-show="phoneMsg" :class="phoneIconClass"></em>
                    <i :class="phoneMsg=='对了'?'textok':''" >{{phoneMsg}}</i>
                </li>
                <li>
                    <span>密码：</span>
                    <input type="password" v-model="psw" @blur="checkPsw()" placeholder="请输入密码,长度位6且必须包含一位大写字母"/>
                    <em v-show="pswMsg" :class="pswIconClass"></em>
                    <i :class="pswMsg=='对了'?'textok':''" >{{pswMsg}}</i>
                </li>
                <li>
                    <span>重复密码：</span>
                    <input type="password" v-model="psw2" @blur="checkPsw2()" placeholder="请重复输入密码" />
                    <em v-show="psw2Msg" :class="psw2IconClass"></em>
                    <i :class="psw2Msg=='对了'?'textok':''" >{{psw2Msg}}</i>
                </li>
                <li>
                    <span>验证码：</span>
                    <input type="text" v-model="captcha"  class="inp_yzm" placeholder="请输入验证码"/>
					<!-- 验证码图片用api 接口拿到 -->
                    <!-- <img src="http://127.0.0.1:9090/user/register/captcha" alt=""/> -->
                    <img :src="captchaURL" alt=""/>
                    <strong class="icon_refresh" @click="refreshCaptcha()"></strong>
                </li>
                <li class="li_checkbox"><label>
                    <input type="checkbox" checked/>
                    <span>我已阅读并同意用户注册协议</span>
                </label>
                </li>
                <li class="li_btn">
                    <button type="button" @click="doRegister()">提交注册</button>
                </li>
            </ul>
        </div>
    </section>
	<iw-footer></iw-footer>
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '@/components/Footer.vue';
export default {
	//JS中对象的属性值不能使用当前对象的其他属性值来算
	data:()=>{
		return {
			// captchaURL:"http://127.0.0.1:9090/user/register/captcha"
			// （X）captchaURL:this.$http.defaults.baseURL+'/user/registe/captcha'
			//对象的属性中，不能使用另一个属性的值进行拼接，不能使用 this
			randNum:Math.random(),//为了拼接一个随机的查询字符串而准备的随机数
			uname:'',//用户名(邮箱)
			unameIconClass:{"icon_error":true,"icon_ok":false},
			phoneIconClass:{"icon_error":true,"icon_ok":false},
			pswIconClass:{"icon_error":true,"icon_ok":false},
			psw2IconClass:{"icon_error":true,"icon_ok":false},
			unameright:false,
			unameMsg:'',
			phoneMsg:'',
			pswMsg:'',
			psw2Msg:'',
			
			phone:'',
			psw:'',
			psw2:'',
			captcha:'',

		}
	},
	//计算属性只能计算，不能改变值
	computed:{
		//验证码图片
		captchaURL(){
			return this.$http.defaults.baseURL+'/user/register/captcha?'+this.randNum;
		},
	},
	methods:{
		checkPsw2(){
			// console.log("开始对密码2进行检查两次密码分别是",this.psw,this.psw2);
			if(this.psw==this.psw2){
				this.psw2Msg="对了";
				this.psw2IconClass={"icon_error":false,"icon_ok":true};
			}else{
				this.psw2Msg="请保持密码一致";
				this.psw2IconClass={"icon_error":true,"icon_ok":false};
			}
		},
		checkPsw(){
			this.pswIconClass={"icon_error":true,"icon_ok":false};
			//必须有一个大写和数字和小写
			var reg = /^(?![0-9a-z]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{6,}$/;
			var psw=this.psw;
			if(!psw){
				this.pswMsg="密码不能为空";
			}else if(!reg.test(this.psw)){
				this.pswMsg="密码格式错误"
			}else{
				this.pswMsg="对了";
				this.pswIconClass={"icon_error":false,"icon_ok":true};
			}
		},
		
		checkPhone(){
			this.phoneIconClass={"icon_error":true,"icon_ok":false}
			
			var regPhone=/^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
			if(!this.phone){
				this.phoneMsg="手机不能为空";
			//正则验证，手机号格式要正确	
			}else if(!regPhone.test(this.phone)){
				this.phoneMsg="手机号格式错误";
			//接口验证
			}else{
				this.phoneExist(this.phone).then((result)=>{
					
					// console.log("检验手机的结果是",result);
					if(result.data==200){
						this.phoneMsg="手机号已存在";
					}else{
						this.phoneMsg="对了";
						this.phoneIconClass={"icon_error":false,"icon_ok":true}
					}
				}).catch(err=>{
					console.log(err);
				})
				
			}
		},
		phoneExist(n){
			//ajax异步获取
			return this.$http.get('/user/check_phone?phone='+n);
		},
		
		checkUname(){
			this.unameright=false;
			var regEmail= /^\w+@\w+\.\w+(\.\w+)?$/;
			    if(!this.uname){//邮箱为空时
			        this.unameIconClass.icon_error=true;
			        this.unameIconClass.icon_ok=false;
					this.unameMsg="请输入您的注册邮箱";
			    }else if(!regEmail.test(this.uname)){
			       this.unameIconClass.icon_error=true;
			       this.unameIconClass.icon_ok=false;
			       this.unameMsg="请输入正确的邮箱格式";
			    }else{
				    this.emailExist(this.uname).then(res=>{
						// console.log("名字和，邮件响应码res",this.uname,res.data.code);
					if(res.data.code===200){
						this.unameIconClass.icon_error=true;
						this.unameIconClass.icon_ok=false;
						this.unameMsg="此邮箱已被其他用户注册";
					}else{
						this.unameIconClass.icon_error = false
						this.unameIconClass.icon_ok = true
						this.unameright=true;
						this.unameMsg=" 对了"//空格
					}
				})
				
			}
			 
		},
		//发起异步请求验证用户名是否被占用；
		//①awit等待  ②编程同步
		emailExist(n){
			//异步判断不行 
			return this.$http.get('/user/check_uname?uname='+n)
		},
		//提交
		doRegister(){
			let data={
				uname:this.uname,
				upwd:this.psw,
				phone:this.phone,
				captcha:this.captcha
			}
			// console.log("得到的数据是",data);
			//异步请求用户注册API 
			this.$http.post('/user/register',data).then(res=>{
				if(res.data.code==200){
					alert("注册成功!!点击跳转后将跳转到登录页")
					this.$router.push('/login');//执行路由跳转
				}else{
					alert(`注册失败！！错误原因：`+res.data.msg);
				}
			}).catch(err=>{
				console.log(err);
			})
		},
		//①计算属性不能做直接修改，②验证码图片的地址与之前的值完全一样，浏览器不会刷新
		//浏览器认为http://127.../s?123  和  http://127.../s?456两个地址是不一样的
		refreshCaptcha(){
			this.randNum=Math.random();
		},
	},
	components:{
		'iw-header':Header,
		'iw-footer':Footer
	}
}	
</script>

<style>
	/*注册页面*/
	.register_box {
	    margin-top:40px;
	    box-shadow: 0px 0px 3px #ccc;
	    background: #fff;
	    padding: 15px 0 60px;
	}
	.register {
	    width: 800px;
	    margin: 0 auto;
	}
	.register>h2 {
	    line-height: 70px;
	    border-bottom: 1px solid #ddd;
	    text-align: center;
	    font-size: 18px;
	    color:#f90;
	    font-weight: lighter;
	}
	.register>ul {
	    margin-top: 36px;
	}
	.register>ul>li {
	    margin-bottom: 22px;
	    line-height: 40px;
	    height: 40px;
	}
	.register>ul>li>span,.register>ul>li>input, .register>ul>li>em, .register>ul>li>i,.register>ul>li>img,.register>ul>li>strong,.register>ul>li>button {
	    float: left;
	}
	.register>ul>li>span {
	    margin-left:120px;
	    width: 120px;
	    text-align: right;
	    font-size: 16px;
	    color:#666;
	}
	.register>ul>li>input {
	    width: 320px;
	    height: 38px;
	    box-sizing: border-box;
	    border:1px solid #ccc;
	    border-radius: 3px;
	    padding: 0 10px;
	}
	.register>ul>li>input.inp_yzm {
	    width: 160px;
	}
	.register>ul>li>em {
	    margin:12px 6px 0;
	    width:20px;
	    height:14px;
	    background:url(../assets/images/iconlist.png) no-repeat;
	    
	}
	.register>ul>li>em.icon_ok {
	    background-position:0 -690px;
	    /* background-position:0 -600px; */
	}
	.register>ul>li>em.icon_error {
	    background-position:0 -670px;
	}
	.register>ul>li>i {
	    color:#f00;
	    font-style: normal;
	    
	}
	.register>ul>li>i.textok{
		color:#0f0;
		
	}
	.register>ul>li>img {
	    margin-left: 16px;
	}
	.register>ul>li>strong {
	    width:22px;
	    height:26px;
	    margin-left: 14px;
	    margin-top: 5px;
	    cursor: pointer;
	    background:url(../assets/images/iconlist.png) 0px -710px no-repeat;
	}
	.register .li_checkbox {
	    margin-top: 40px;
	}
	.register .li_checkbox label {
	    margin-left:240px;
	}
	.register .li_checkbox input {
	    vertical-align: middle;
	}
	.register .li_checkbox span {
	    display: inline-block;
	    vertical-align: middle;
	}
	
	.register button {
	    outline: none;
	    margin-left: 240px;
	    width: 320px;
	    height:38px;
	    border:0;
	    background: #72b134;
	    color:#fff;
	    font-size: 18px;
	    cursor: pointer;
	}
	.register button:hover {
	    background: #65a428;
	}
	.li_btn>button.disabled{
	    background: #ccc;
	    cursor: default;
	}
</style>
